<template>
  <div class="add">
    <el-breadcrumb separator="/" class="add_box">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>工作日历</el-breadcrumb-item>
        <el-breadcrumb-item>新增工作日历_周</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="top">
        基本设置
      </div>

      <div class="Basic_Settings">
                <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">

                <div class="active_box" >
                    <el-form-item label="工作日历名称:"  prop="name">
                    <el-input v-show="!quxiao" v-model="form.name" placeholder="请设置工作日历名称（最多30个汉字或字母）"/>
                    <p v-show="quxiao">做五休三</p>
                    </el-form-item>
                    <el-form-item label="设为默认" v-show="!quxiao">
                    <el-switch v-model="form.delivery1" />
                    </el-form-item>
                </div>
            
            <el-form-item label="类型:" style="margin-top:15px">
            <el-select v-model="form.region" placeholder="请设置类型" v-show="!quxiao">
                <el-option label="周" value="周" />
                <el-option label="月" value="月" />
                 <el-option label="无固定休息日" value="无固定休息日" />
            </el-select>
            <p v-show="quxiao">周</p>
            </el-form-item>

            <div class="gongzuori" v-show="!quxiao">
                <el-form-item label="星期一">
                <el-radio-group v-model="form.resource1" >
                    <el-radio label="工作日" :default-value="true"/>
                    <el-radio label="休息日" />
                </el-radio-group>
                </el-form-item>
                <el-form-item label="星期二">
                <el-radio-group v-model="form.resource2" >
                    <el-radio label="工作日" />
                    <el-radio label="休息日" />
                </el-radio-group>
                </el-form-item>
                <el-form-item label="星期三">
                <el-radio-group v-model="form.resource3" >
                    <el-radio label="工作日" />
                    <el-radio label="休息日" />
                </el-radio-group>
                </el-form-item>
                <el-form-item label="星期四">
                <el-radio-group v-model="form.resource4" >
                    <el-radio label="工作日" />
                    <el-radio label="休息日" />
                </el-radio-group>
                </el-form-item>
                <el-form-item label="星期五">
                <el-radio-group v-model="form.resource5" >
                    <el-radio label="工作日" />
                    <el-radio label="休息日" />
                </el-radio-group>
                </el-form-item>
                <el-form-item label="星期六">
                <el-radio-group v-model="form.resource6" >
                    <el-radio label="工作日" />
                    <el-radio label="休息日" />
                </el-radio-group>
                </el-form-item>
                <el-form-item label="星期日">
                <el-radio-group v-model="form.resource7" >
                    <el-radio label="工作日" />
                    <el-radio label="休息日" />
                </el-radio-group>
                </el-form-item>
            </div>
            
            <div class="moren" v-show="quxiao">
                <div>每周&nbsp;&nbsp;&nbsp;星期一&nbsp;&nbsp;&nbsp;工作日</div>
                <div>每周&nbsp;&nbsp;&nbsp;星期二&nbsp;&nbsp;&nbsp;工作日</div>
                <div>每周&nbsp;&nbsp;&nbsp;星期三&nbsp;&nbsp;&nbsp;工作日</div>
                <div>每周&nbsp;&nbsp;&nbsp;星期四&nbsp;&nbsp;&nbsp;工作日</div>
                <div>每周&nbsp;&nbsp;&nbsp;星期五&nbsp;&nbsp;&nbsp;工作日</div>
                <div>每周&nbsp;&nbsp;&nbsp;星期六&nbsp;&nbsp;&nbsp;休息日</div>
                <div>每周&nbsp;&nbsp;&nbsp;星期日&nbsp;&nbsp;&nbsp;休息日</div>
            </div>
                
            <el-form-item label="遇法定节假日自动排休:" style="margin-top:10px" >
                <el-switch v-model="form.delivery2" v-show="!quxiao"/> <p v-show="quxiao">是</p>
            </el-form-item>

            <div class="active_bottom">
                <el-form-item>
                <el-button @click="fund">返回</el-button>    
                <el-button v-show="!quxiao" @click="funb">取消</el-button>
                <el-button v-show="quxiao" @click="func">编辑</el-button>
                <el-button type="primary" @click="onSubmit(form.name,form.region,form.delivery2)" v-show="!quxiao">保存</el-button>
                </el-form-item> 
            </div>
           
        </el-form>
      </div>

      <div class="Date_setting">
            <div class="top">
                特殊日期设置
            </div>

            <div class="datebox">
                <div class="demo-date-picker">
                    <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder=""
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                    >
                    <template #default="cell">
                        <div class="cell" :class="{ current: cell.isCurrent }">
                        <span class="text">{{ cell.text }}</span>
                        <span v-if="isHoliday(cell)" class="holiday" />
                        </div>
                    </template>
                    </el-date-picker>
                 </div>
            </div>

            <div class="hanzi">
                <el-icon class="xiu"><Shop /></el-icon>休息日&nbsp;&nbsp;&nbsp;&nbsp;<el-icon class="gong"><Briefcase /></el-icon>工作日&nbsp;&nbsp;&nbsp;特殊日期设置法定节假日/休息日工作日
            </div>

            <div class="rili">
                 <el-calendar v-model="value1" @click="rili(value1)">
                    <template #date-cell="{ data }">
                        <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.day.split('-').slice(1).join('-') }}
                            {{ data.isSelected ? '✔️' : '' }}
                        </p>
                        <p :class="data.isSelected ? 'is-selected' : ''">
                            {{data.day =='2023-06-17' ? '休息' : '上班'}}
                        </p>
                        <el-icon class="xiu" :class="data.isSelected ? 'is-selected' : ''"><Shop /></el-icon>
                    </template>
                 </el-calendar>
            </div>

      </div>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { onMounted, ref } from 'vue'
import * as service from "@/api/lei/lei";
// 表单校验时要定义：ruleFormRef
var ruleFormRef = ref();
// 表单验证的数据
var rules = ref({
  name: [{ required: true, message: "请输入工作日历名称", trigger: "blur" }],
});
// 引入路由
import { useRouter } from "vue-router";
var $router = useRouter()

const form = ref({
  name: '',
  region: '周',
  delivery1: false,
  delivery2: false,
  type: [],
  resource1: '工作日',
  resource2: '工作日',
  resource3: '工作日',
  resource4: '工作日',
  resource5: '工作日',
  resource6: '工作日',
  resource7: '工作日',
  desc: '',
})

var quxiao = ref(false)
// 取消按钮
var funb =()=>{
    quxiao.value=true
}
// 编辑按钮
var func =()=>{
    quxiao.value=!quxiao
}
// 返回按钮（返回工作日历页面）
var fund =()=>{
    $router.push('/index/Worktime')
}
// 保存按钮，发送添加请求
const onSubmit = async(Rlname,Rllist,JQAP) => {
        JQAP = JQAP===true?'是':'否'
        ruleFormRef.value.validate(async(valid, fields) => {
            if (valid) {
            var res = await service.GZRL_add({Rlname,Rllist,JQAP})
                if (res.status===201) {
                    ElNotification({
                        title: "通知",
                        message: "工作日历添加成功",
                        type: "success",
                        duration: 2000,
                    });
                    $router.push('/index/Worktime')
                }
            } else {
            console.log('error submit!', fields)
            }
  })
        
}

// 选择日期的输入框
var value1 = ref('2023-06-17')
const holidays = [
  '2021-10-01',
  '2021-10-02',
  '2021-10-03',
  '2021-10-04',
  '2021-10-05',
  '2021-10-06',
  '2021-10-07',
]

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}


var rili =(val)=>{
    console.log(val);
    // const date = new Date(val); // 将字符串转换为日期格式
    // const year = date.getFullYear(); // 获取年份
    // const month = date.getMonth() + 1; // 获取月份，注意月份从0开始，也就是0代表1月，11代表12月，所以需要加1
    // const day = date.getDate(); // 获取日期
    // const formattedDate = `${year}-${month}-${day}`; // 将年、月、日拼接为指定格式的日期字符串
    // value1.value=formattedDate
}


</script>

<style scoped lang='scss'>
.add{
    height:500px ;
    ::-webkit-scrollbar{
        overflow: hidden;
    }
  
    .add_box{
        padding: 10px 15px;
        font-size: 14px;
    } 
    .top{
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        border-bottom: 1px solid #f5f5f5;
        padding:  10px 15px;
        font-weight: bold;
        }
    .Basic_Settings{ 
        width: 1100px;
        height: 500px;
        margin-top: 10px;
        box-sizing: border-box;
        // background-color: rgb(144, 137, 137);
        .el-form-item{
            margin: 0;
        }
        .active_box{
            display: flex;
        }
        :deep(.el-input){
            width: 500px !important;
        }
        :deep(.el-input--suffix){
            width: 300px !important;
        }
        :deep(.el-form-item__label){
            width: 160px !important;
        }
        .active_bottom{
            margin-top: 15px;
        }
        .moren{
            margin-left: 150px;
            div{
                margin: 10px 0;
                font-size: 12px;
                color: #211f1f;
            }
        }
    }
    .Date_setting{
        width: 1100px;
        height: 500px;
        margin-top: 10px;
        box-sizing: border-box;
        // background-color: rgb(243, 139, 139);
        .datebox{
            margin: 15px;
        }
        .hanzi{
            height: 24px;
            line-height: 24px;
            margin: 15px;
            font-size: 12px;
            .xiu{
                color: rgb(221, 198, 28);
                font-size: 18px;
            }
            .gong{
                color: rgb(31, 25, 188);
                font-size: 18px;
            }
        }
        .is-selected {
            color: #1989fa;
        }
    }
}

</style>